<template>
  <li>
    <header>自定义事件</header>
    <ul>
      <li>
        事件名
        <!-- 没有效果 -->
        <my-component @my-event="doSomething" />
      </li>
      <li>
        自定义事件的v-model
        <div>
          <label for="model">
            双向绑定
            <base-checkbox id="model" v-model="lovingVue" />
            {{ lovingVue }}
          </label>
        </div>
      </li>
      <li>
        将原生事件绑定到组件
        <div>
          <base-input label="静默失败" @focus.native="onFocus" />
          <br />
          <base-input-listeners label="使用 $listeners" @focus="onFocus" />
        </div>
      </li>
      <li>
        .sync 修饰符
        <parent />
      </li>
    </ul>
  </li>
</template>

<script>
import MyComponent from "./samples/MyComponent";
import BaseCheckbox from "./samples/BaseCheckbox";
import BaseInput from "./samples/BaseInput";
import BaseInputListeners from "./samples/BaseInputListeners";
import Parent from "./samples/Parent";

export default {
  name: "CustomEvent",
  components: {
    MyComponent,
    BaseCheckbox,
    BaseInput,
    BaseInputListeners,
    Parent
  },
  data() {
    return {
      lovingVue: true
    };
  },
  methods: {
    doSomething() {
      console.log("my event: do something");
    },
    onFocus() {
      console.log("focus!");
    }
  }
};
</script>